// box是轮播图盒子
// ul是图片盒子
// ol是圆点盒子
// left是左按钮
// right是右按钮
// 注意给box和ul加定位

// offsetWidth获得宽度

// 利用绝对定位使图片层叠，通过排他思想，修改背景层级使对应图片显示出来

window.addEventListener('load', function () {
    var left = document.querySelector('.screenshot-btn-left');
    var right = document.querySelector('.screenshot-btn-right');
    var box = document.querySelector('.screenshot-box');
    var ul = document.querySelector('.screenshot-Carousel');
    var ol = document.querySelector('.screenshot-round');
    var lis = ul.querySelectorAll('li');

    // //默认点击右键，执行播放下一张
    var timer = setInterval(function () {
        right.click();
    }, 2000);

    //鼠标经过轮播图，显示左右按钮，关闭自动播放
    box.addEventListener('mouseenter', function () {
        left.style.display = 'block';
        right.style.display = 'block';
        clearInterval(timer);
        timer = null;
    })

    //鼠标离开轮播图，隐藏左右按钮，开启自动播放
    box.addEventListener('mouseleave', function () {
        left.style.display = 'none';
        right.style.display = 'none';
        timer = setInterval(function () {
            right.click();
        }, 2000);
    })

    //num控制图片与圆点的显示
    var num = 0;

    //根据图片个数，创建小圆点，并为每一个小圆点设置类名，用来区分，并对应相应的图片
    //再为每个小圆点添加点击事件，改变对应颜色，并且显示对应图片
    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');
        li.setAttribute('num', i);
        ol.appendChild(li);

        li.addEventListener('click', function () {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'green';

            num = this.getAttribute('num');
            for (var i = 0; i < lis.length; i++) {
                lis[i].style.zIndex = '-1';
            }
            lis[num].style.zIndex = '1';

            console.log('你点击了小圆点');
        })
    }

    //获取自动创建的li,默认第一个小圆点获得颜色
    var list = ol.querySelectorAll('li');
    list[0].className = 'green';

    //排他思想，全部图片层级降低，点击的图片，层级变高；并且点击对应小圆点
    function btn() {
        for (var i = 0; i < lis.length; i++) {
            lis[i].style.zIndex = '-1';
        }
        lis[num].style.zIndex = '1';

        list[num].click();
        console.log('你点击了按键');
    }


    right.addEventListener('click', function () {
        num++;
        if (num == lis.length) {
            num = 0;
        }
        btn();
    })

    left.addEventListener('click', function () {
        num--;
        if (num == -1) {
            num = lis.length - 1;
        }
        btn();
    })


})